<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理 - 企业培训平台</title>
    <style>
        :root {
            --sidebar-width: 240px; --primary-color: #007bff; --danger-color: #dc3545;
            --info-color: #17a2b8; --warning-color: #ffc107; --secondary-color: #6c757d;
            --light-gray: #f8f9fa; --border-color: #dee2e6;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: #f4f5f7; margin: 0; color: #333;
        }
        .main-content { margin-left: var(--sidebar-width); padding: 30px; }
        .container-card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 25px 30px; }
        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .page-header h1 { margin: 0; font-size: 1.8em; }
        /* --- NEW: Search Form Styles --- */
        .search-form { display: flex; gap: 10px; margin-bottom: 25px; align-items: center; }
        .search-form input { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; width: 300px; }

        .alert { padding: 15px; margin-bottom: 20px; border-radius: 5px; border: 1px solid transparent; }
        .alert-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
        .alert-danger { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
        .table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
        .table th, .table td { padding: 12px 15px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
        .table thead th { background-color: var(--light-gray); font-weight: 600; color: #495057; }
        .table tbody tr:hover { background-color: #e9ecef; }
        .table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .table-actions form { margin: 0; }
        .btn {
            display: inline-block; font-weight: 500; text-align: center; cursor: pointer;
            border: 1px solid transparent; padding: 8px 12px; font-size: 0.9em;
            border-radius: 4px; transition: all 0.2s ease-in-out; text-decoration: none; color: #fff;
        }
        .btn:hover { filter: brightness(90%); }
        .btn-primary { background-color: var(--primary-color); }
        .btn-secondary { background-color: var(--secondary-color); }
        .btn-info { background-color: var(--info-color); }
        .btn-warning { background-color: var(--warning-color); color: #212529; }
        .btn-danger { background-color: var(--danger-color); }
        .no-classes-message { text-align: center; padding: 40px; color: #666; background-color: #fafafa; border: 1px dashed #ccc; border-radius: 8px; }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container-card">
        <div class="page-header">
            <h1>班级管理</h1>
            <a th:href="@{/class/create}" class="btn btn-primary">创建新班级</a>
        </div>

        <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
        <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

        <form th:action="@{/class/manage}" method="get" class="search-form">
            <input type="text" name="keyword" placeholder="按班级名称搜索..." th:value="${keyword}">
            <button type="submit" class="btn btn-secondary">搜索</button>
        </form>

        <div th:if="${!#lists.isEmpty(classes)}">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th><th>班级名称</th><th>教师ID</th>
                    <th>学生数量</th><th>课程数量</th><th>创建时间</th><th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="classObj : ${classes}">
                    <td th:text="${classObj.id}"></td>
                    <td class="class-name" th:text="${classObj.className}"></td>
                    <td th:text="${classObj.teaId}"></td>
                    <td th:text="${classObj.classStuNum}"></td>
                    <td th:text="${classObj.classCouNum}"></td>
                    <td th:text="${classObj.createTime != null ? #dates.format(classObj.createTime, 'yyyy-MM-dd HH:mm') : 'N/A'}"></td>
                    <td class="table-actions">
                        <a th:href="@{/class/{id}/students/manage(id=${classObj.id})}" class="btn btn-info">管理学生</a>
                        <a th:href="@{/class/{id}/courses/manage(id=${classObj.id})}" class="btn btn-info">管理课程</a>
                        <a th:href="@{/class/edit/{id}(id=${classObj.id})}" class="btn btn-warning">编辑</a>
                        <form class="delete-form" th:action="@{/class/delete/{id}(id=${classObj.id})}" method="post">
                            <button type="submit" class="btn btn-danger">删除</button>
                        </form>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div th:if="${#lists.isEmpty(classes)}" class="no-classes-message">
            <p th:if="${keyword != null and keyword != ''}">
                没有找到名称中包含“<strong th:text="${keyword}"></strong>”的班级。
            </p>
            <p th:unless="${keyword != null and keyword != ''}">
                目前还没有班级，请点击上方“创建新班级”按钮添加。
            </p>
        </div>
    </div>
</div>

<script>
    // This JS enhances the delete confirmation to be more specific
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.delete-form').forEach(form => {
            form.addEventListener('submit', function(event) {
                const row = form.closest('tr');
                // Assuming the class name is in a td with class 'class-name'
                const className = row.querySelector('.class-name').innerText;
                if (!confirm(`您确定要删除班级 “${className}” 吗？删除后将无法恢复。`)) {
                    event.preventDefault(); // Stop submission if user clicks cancel
                }
            });
        });
    });
</script>
</body>
</html>